define(function(require, exports, module) {
	'use strict';
    
    var rk = require('rk');

    $.widget('rk.xsyTab', $.rk.xsyBase, {
        _params:{},
        _create: function(){
            var me = this;
            var elem = me.element;
            var opt = me.options;

            var tpl = require('platform/widgets/layouts/xsyTab/widget.tpl');
            var html = rk.templateText(tpl, opt);
            elem.addClass('xsy_tab').html(html);

            me.xsy_tab_list = elem.find('>.xsy_tab_list');
            me.xsy_tab_nav = me.xsy_tab_list.find('>.xsy_tab_nav');

            me._initChildren();
        },
        _init:function(){
            var me = this;
            var elem = me.element;
            var opt = me.options;

            me.xsy_tab_nav.on('click', '>li.xsy_tab_item', function(){
                var li = $(this);
                var idx = li.attr('idx');
                me._select(idx);
            })
        },
        _select: function(idx){
            var me = this;
            var elem = me.element;
            var opt = me.options;

            me.xsy_tab_nav.find('>li.xsy_tab_item').removeClass('active');
            me.xsy_tab_list.find('>.xsy_tab_content').hide();

            idx = $.trim(idx);

            me.xsy_tab_nav.find('>li.xsy_tab_item[idx="'+idx+'"]').addClass('active');
            var selected_content = me.xsy_tab_list.find('>.xsy_tab_content[idx="'+idx+'"]')
            selected_content.show();
            if(!selected_content.data('widgetInited')) {
                rk.formMgr.createWidget(selected_content);
            }
        },
        appendButton: function(label){
            var me = this;
            var elem = me.element;
            var opt = me.options;

            var idx = 0;
            me.xsy_tab_nav.find('>li.xsy_tab_item').each(function(){
                var li = $(this);
                var lidx = parseInt(li.attr('idx'));
                if(lidx > idx)idx = lidx;
            });
            idx++;
            var btn = '<li class="xsy_tab_item" idx="'+idx+'">'+
                        '<a href="javascript:;">'+label+'</a>'+
                      '</li>';
            var content = '<div class="xsy_tab_content" style="display:none;" data-layout="'+idx+'" idx="'+idx+'"></div>'

            me.xsy_tab_nav.append(btn)
            me.xsy_tab_list.append(content)
            return idx;
        },
        appendChild: function(winfo){
            var me = this;
            var elem = me.element;
            var opt = me.options;

            var idx = me.appendButton(winfo.label);
            var con = me.xsy_tab_list.find('>.xsy_tab_content[idx="'+idx+'"]');
            con.html('<div class="xsy_tab_con" id="'+winfo.uuid+'" wtype="'+winfo.widgetType+'"></div>');

            //var myInfo = me._getInfo();
            //myInfo.children.push(winfo);
        },
        handleChildrenChange: function(childreninfo){
            var me = this;
            var elem = me.element;
            var opt = me.options;

            me.xsy_tab_nav.find('>li.xsy_tab_item').remove();
            var contents = me.xsy_tab_list.find('>.xsy_tab_content');

            var uuidToIdx = {};
            var uuidToChild = {};

            childreninfo.forEach(function(item){
                uuidToChild[item.uuid] = item;
            })

            contents.each(function(index,item){
                var $item = $(item);
                var uuid = $item.find('div.xsy_tab_con').attr('id');

                if(!uuidToChild[uuid]){
                    $item.remove();
                }else{
                    uuidToIdx[uuid] = $item.attr('idx');
                }       
            })


            childreninfo.forEach(function(index, el) {
                if(uuidToIdx[index.uuid]){
                    me._appendButton({
                        idx : uuidToIdx[index.uuid],
                        label : index.attributes.title
                    })
                }else{
                    var winfo = {};
                    winfo.label = index.attributes.title;
                    winfo.uuid = index.uuid;
                    winfo.widgetType = index.widgetType;

                    me.appendChild(winfo);
                }  
            });

            me.xsy_tab_nav.find('>li.xsy_tab_item:first').click();

        },

        _appendButton : function(data){
            var me = this;
            var elem = me.element;
            var opt = me.options;

            var btn = '<li class="xsy_tab_item" idx="'+ data.idx+'">'+
                        '<a href="javascript:;">'+ data.label+'</a>'+
                      '</li>';
            me.xsy_tab_nav.append(btn)
        }
    });
});